<!-- 查看详情 -->
<template>
  <div class="drive-detial">
    <el-tabs v-model="activeName" class="tabs-container" style="padding: 36px" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-main>
          <el-form class="form-content" style="padding:0 50px" :model="baseInfor">
            <el-row>
              <!-- 员工编号 -->
              <el-col :span="8">
                <el-form-item label="车辆编号" label-width="100px">
                  <el-input
                    v-if="isTempDisable"
                    v-model="baseInfor.id"
                    :disabled="alwaysDisable"
                    style="width: 214px;"
                  />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.id }}
                  </span>
                </el-form-item>
              </el-col>
              <!-- 司机名称 -->
              <el-col :span="8">
                <el-form-item label="车牌号码" label-width="100px">
                  <el-input
                    v-if="isTempDisable"
                    v-model="baseInfor.licensePlate"
                    :disabled="alwaysDisable"
                    style="width: 214px;"
                  />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.licensePlate }}
                  </span>
                </el-form-item>
              </el-col>
              <!-- 所属机构 -->
              <el-col :span="8">
                <el-form-item label="车型名称:" label-width="100px">
                  <el-input
                    v-if="isTempDisable"
                    v-model="baseInfor.truckTypeName"
                    :disabled="alwaysDisable"
                    style="width: 214px;"
                  />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.truckTypeName }}
                  </span>
                </el-form-item>
              </el-col>
              <!-- 电话 -->
              <el-col :span="8">
                <el-form-item label="车辆体积:" label-width="100px">
                  <el-input
                    v-if="isTempDisable"
                    v-model="baseInfor.allowableVolume"
                    :disabled="alwaysDisable"
                    style="width: 214px;"
                  />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.allowableVolume }}
                  </span>
                </el-form-item>
              </el-col>
              <!-- 年龄 -->
              <el-col :span="8">
                <el-form-item label="车辆载量" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="baseInfor.allowableLoad" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.allowableLoad }}
                  </span>
                </el-form-item>

              </el-col>
              <!-- GPSID -->
              <el-col :span="8">
                <el-form-item label="GPSID:" label-width="100px">
                  <el-input
                    v-if="isTempDisable"
                    v-model="baseInfor.deviceGpsId"
                    :disabled="alwaysDisable"
                    style="width: 214px;"
                  />
                  <span v-else style="width: 214px;">
                    {{ baseInfor.deviceGpsId }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="图片信息" label-width="100px">
                  <!-- disabled：控制删除按钮 -->
                  <!-- :class="{ disabled: isShow }" 控制上传框 -->
                  <el-upload

                    :disabled="isShow"
                    action=""
                    list-type="picture-card"
                    :file-list="images"
                    :on-success="handleAvatarSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :class="{ disabled: isShow }"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="行驶证信息" name="second">
        <el-main>
          <el-form :model="formInline" class="form-content" style="padding:0 50px">
            <el-row>
              <!-- 驾驶证信息 -->
              <el-col :span="8">
                <el-form-item label="驾驶证号:" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.licenseNumber" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.licenseNumber }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="准驾车型" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.allowableType" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.allowableType }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="初次领证日期" label-width="100px">
                  <el-date-picker
                    v-if="isTempDisable"
                    v-model="formInline.initialCertificateDate"
                    type="date"
                    placeholder="选择日期"
                  />
                  <span v-else style="width: 214px;">
                    {{ formInline.initialCertificateDate }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="有效期" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.validPeriod" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.validPeriod }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾龄" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.driverAge" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.driverAge }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="驾驶类型" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.licenseType" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.licenseType }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="从业资格证" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.qualificationCertificate" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.qualificationCertificate }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入场信息" label-width="100px">
                  <el-input v-if="isTempDisable" v-model="formInline.passCertificate" style="width: 214px;" />
                  <span v-else style="width: 214px;">
                    {{ formInline.passCertificate }}
                  </span>
                </el-form-item>
              </el-col>

              <el-col :span="16">
                <el-form-item label="图片信息" label-width="100px">
                  <!-- disabled：控制删除按钮 -->
                  <!-- :class="{ disabled: isShow }" 控制上传框 -->
                  <el-upload

                    :disabled="isShow"
                    action=""
                    list-type="picture-card"
                    :file-list="images"
                    :on-success="handleAvatarSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :class="{ disabled: isShow }"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-main>
      </el-tab-pane>

    </el-tabs>
    <el-divider />
    <div class="footer" style="text-align:center">
      <el-button v-if="!isTempDisable" class="stbList" is-temp-disable="true,isShow=false&quot;">编辑</el-button>
      <div v-else>
        <el-button type="warning" @click="saveSubmit, isShow = true">保存</el-button>
        <el-button @click="cancle, isShow = true">取消</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { getDetailVehicleList } from '@/api/vehicle'
import { getLicenseAPI } from '@/api/driver'
export default {
  data() {
    return {
      // 控制上传框
      isShow: true,
      // 大图地址
      dialogImageUrl: '',
      dialogVisible: false,
      images: [],
      // 禁用按钮
      isTempDisable: false, // 临时
      alwaysDisable: true, // 禁用
      activeName: 'first',

      // 基本信息
      baseInfor: {},
      //   baseInfor: {
      //     agency: {
      //       name: ''
      //     }

      //   },
      formInline: {}

    }
  },
  async created() {
    // console.log(this.$route.query.id)
    await this.getDriveDetail()
    await this.getDetailVehicleList()
  },
  mounted() {

  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      // response表示上传结果
      // file表示当前上传的文件
      // fileList表示当前成功上传的图片数组
      // 将图片保存
      console.log('fileList', fileList)
      // this.images = fileList
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
      // 删除操作
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleClick(tab, event) {
      // console.log(1)
      this.isTempDisable = false
      // console.log(tab, event)
    },
    onSubmit() {
      console.log('submit!')
    },
    // 获取司机基本信息
    async getDetailVehicleList() {
      const { data } = await getDetailVehicleList(this.$route.query.id)
      this.baseInfor = data
      console.log(data)
    },
    async getDriveDetail() {
      // 获取驾驶证基本信息
      const res = await getLicenseAPI(this.$route.query.id)
      this.formInline = res.data
      console.log(this.formInline.picture)
      if (res.data.picture) {
        const linksArray = res.data.picture.split(',').map(link => link.trim())
        // fileList: [ { url: 'https://example.com/image1.jpg', name: 'image1.jpg', status: 'success', uid: 'uid1', raw: File object }, // 可以包含其他文件对象 ]
        this.images = linksArray.map(link => ({
          url: link,
          name: 'image1.jpg',
          status: 'success',
          uid: link,
          raw: null // 对于编辑时的回显，raw 可以设置为 null
        }))
        // https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/ae510574-d222-49ad-b0ce-88cc96508705.png,https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/aac52c2f-a273-4130-be35-5d7de7e577ff.png
        // console.log('images', this.images)
      }
    },
    // 保存
    saveSubmit() {
      // 提示用户
      this.$message.success('修改数据成功')
      // 取消
      this.isTempDisable = false
    },
    // 取消
    cancle() {
      // 取消
      this.isTempDisable = false
    }
  }
}
</script>

  <style lang='scss' scoped>
  .drive-detial {
    background: #fff;
    height: 664px;

    .form-content {
      display: flex;
      justify-content: space-around;
      height: 400px;
    }
  }

  .thumbnail {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 8px;
  }

  ::v-deep.disabled .el-upload--picture-card {
      display: none;
  }
  .large-image-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    /* 调整大图容器的宽度 */
    height: auto;
    /* 根据大图比例自动计算高度 */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    text-align: center;
  }

  .large-image-container img {
    max-width: 100%;
    height: auto;
    margin: 16px;
  }

  .close-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 20px;
    color: #888;
    cursor: pointer;
  }
   .stbList{
    color: white;
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);
  }
  </style>
